<template>
   
  <div>
    <dl v-for="(item, i) in data" :key="item.id">
      <p
        @click="dianji(item.activity, i)"
        :class="isactive === i ? 'active' : ''"
      >
        {{ item.activity }}
      </p>
         
    </dl>
     
  </div>
</template>

<script>
export default {
  data() {
    return {
      isactive: 0,
    };
  },
  props: {
    data: Array,
    Optionsi: Number,
  },
  created() {},
  methods: {
    dianji(name, i) {
      this.isactive = i;
      // console.log(name,"dadasdasdasdasd")
      this.$emit("abc", name);
    },
  },
};
</script>

<style scoped lang="scss">
p {
  // width: 100%;
  text-align: center;
  margin-left: 2vh;
  line-height: 7vh;
  background: rgb(216, 216, 216);
  font-size: 13px;
}
.active {
  background: rgb(255, 255, 255);
}
</style>
